<template>
  <view class="box">
    <view class="to" v-if="param.to">{{ handleTo(param) }}</view>
    <view class="input-box">
      <view class="verify-code-input-box">
        <!-- 6个验证码输入框 -->
        <view
            v-for="(item, index) in codeList"
            class="code-input-item">
          <input
              class="code-input"
              type="number"
              @input="codeInput(index)"
              @keyup="codeKeyUp($event, index)"
              :focus="codeFocusIndex === index"
              :cursor="1"
              v-model="codeList[index]"
          ></input>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      isFocus: true,
      param: {
        to: "",
        value: ""
      },
      // 验证码list, 用于存储6个验证码
      codeList: ['', '', '', '', '', ''],
      codeFocusIndex: -1,
      codeListOld: ['', '', '', '', '', ''],
    };
  },
  created() {
    this.param = this.$kt.storage.get("loginParam");
  },
  methods: {
    codeKeyUp(event, index) {
      // 根据codeListOld的值和codeList的值，判断是否是删除键
      if (this.codeListOld[index] === "" && this.codeList[index] === "") {
        this.codeFocusIndex = index - 1;
        this.codeList[index - 1] = "";
        setTimeout(() => {
          this.codeList[index - 1] = this.codeListOld[index - 1];
        }, 100);
      }
      this.codeListOld = JSON.parse(JSON.stringify(this.codeList));
    },
    codeInput(index){
      // 如果输入框不是数字, 清空输入框
      // 正则表示判断
      if (!/^\d+$/.test(this.codeList[index])) {
        this.codeList[index] = "";
        return;
      }
      // 如果大于1位，就将后面的index+1的值设置为当前值
      if (this.codeList[index].length > 1) {
        let code=this.codeList[index]+"";
        for (let i = 0; i < code.length; i++) {
          this.codeList[index] = code[i];
          if (index < this.codeList.length - 1) {
            this.codeList[index + 1] = code[i + 1];
          }
        }


      }
      // 输完一个验证码后，自动跳到下一个输入框
      if (this.codeList[index].length === 1 && index < this.codeList.length - 1) {
        this.codeFocusIndex = index + 1;
      }
      // 如果是减少输入，自动跳到上一个输入框
      if (this.codeList[index].length === 0 && index > 0) {
        this.codeFocusIndex = index - 1;
        this.codeList[index-1] = "";
        setTimeout(()=>{
          this.codeList[index-1] = this.codeListOld[index-1];
        },100);
      }
      this.codeListOld = JSON.parse(JSON.stringify(this.codeList));

    },
    /**
     * 处理to的值
     */
    handleTo(param) {
      // 如果是邮箱
      if (this.param.typeCode === "email") {
        // 将@前面的字符替换为*，只保留开始和结尾的字符
        let split = param.to.split("@");
        // 开始的字符
        let start = split[0].substring(0, 1);
        // 如果小于3个字符，直接返回
        if (split[0].length <= 3) {
          return param.to;
        }

        // 结尾的字符
        let end = split[0].substring(split[0].length - 1, split[0].length);
        // 中间的*号数量
        let middle = split[0].length - start.length - end.length;
        // 中间的*号
        let middleStr = "";
        for (let i = 0; i < middle; i++) {
          middleStr += "*";
        }
        return start + middleStr + end + "@" + split[1];
      }
      // 如果是手机
      if (this.param.typeCode === "phone") {
        // 如果超过11位，保留前3位和后4位
        if (param.to.length > 11) {
          // 获取中间星号的数量
          let middle = param.to.length - 3 - 4;
          let middleStr = "";
          for (let i = 0; i < middle; i++) {
            middleStr += "*";
          }
          return "+" + param.phoneAreaCode + " " + param.to.substring(0, 3) + middleStr + param.to.substring(param.to.length - 4, param.to.length);
        }
        // 如果小于11位，保留前2和后2位
        if (param.to.length <= 11) {
          // 获取中间星号的数量
          let middle = param.to.length - 2 - 2;
          let middleStr = "";
          for (let i = 0; i < middle; i++) {
            middleStr += "*";
          }
          return "+" + param.phoneAreaCode + " " + param.to.substring(0, 2) + middleStr + param.to.substring(param.to.length - 2, param.to.length);
        }
        // 获取前面1位，中间的*号，后面的1位
        let paramStr = param.to.substring(0, 1);
        for (let i = 0; i < param.to.length - 2; i++) {
          paramStr += "*";
        }
        return paramStr + param.to.substring(param.to.length - 1, param.to.length);
      }
    },

    focus() {
      this.param = this.$kt.storage.get("loginParam");
      this.isFocus = true;
    },
  }
}
</script>

<style lang="scss" scoped>
.box {
  text-align: center;
}

.input-box {
  width: 600rpx;
  margin: 0 auto;
  position: relative;
}

.input {
  font-size: 40rpx;
  letter-spacing: 20rpx;
}

.line {
  width: 100%;
  height: 2px;
  border-radius: 5rpx;
  background-color: #000;
  margin-top: 10px;
}

.verify-code-input-box {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.to {
  font-size: 40rpx;
  color: #000000;
  letter-spacing: 1rpx;
}

.code-input {
  width: 50rpx;
  height: 50rpx;
  font-size: 40rpx;
  text-align: center;
  border-bottom: 2rpx solid #000;
  outline: none;
  margin: 0 10rpx;
}


</style>
